<script setup lang="ts">
import JsBarcode from 'jsbarcode'
import { onMounted, ref } from 'vue'

const barcodeRef = ref(null)
const text = '6900000000001'
const options = {
  // format: 'EAN13', // 格式
  height: 50,
  // text: "覆盖显示的文本",
  fontSize: 16,
  // background: '#ccc',
  lineColor: 'black',
}
onMounted(() => {
  JsBarcode(barcodeRef.value, text, options)
})
</script>

<template>
  <svg ref="barcodeRef"></svg>
</template>

<style lang="scss" scoped>
.icon-text-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .icon-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    cursor: pointer;
    .icon {
      margin-right: 5px;
      font-size: 16px;
    }
    .text {
      width: 2em;
    }
    .text.add {
      min-width: 5em;
    }
  }
  .icon-text:last-child {
    margin-right: 0;
  }
  .icon-text.info {
    color: var(--theme-color);
  }
  .icon-text.delete {
    color: #f56c6c;
  }
}
</style>
